<template>
    <div>
        <div id="certify" class="col-md-12">
            <div class="swiper-container" style="width: 100%;">
            <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="@assets/images/wine1.png">
                <span>粉青小封坛</span>
            </div>
            <div class="swiper-slide" @click="shopDetail()"><img src="@assets/images/wine2.png"><span>清图红盒</span></div>
            <div class="swiper-slide" @click="shopDetail()"><img src="@assets/images/wine3.png"><span>清图红盒</span></div>
            <div class="swiper-slide" @click="shopDetail()"><img src="@assets/images/wine4.png"><span>清图蓝盒</span></div>
            <div class="swiper-slide" @click="shopDetail()"><img src="@assets/images/wine5.png"><span>清图蓝盒</span></div>
                </div>
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"><img src="img/index/编组 5备份.png" alt=""></div>
            <div class="swiper-button-next"><img src="img/index/编组 5.png" alt=""></div> -->
            </div>
        </div>
        <div class="s_bottom">
            <!-- <div class="iconfont iconzuojiantou" @click="left"></div> -->
            <div class="s_list iconfont iconbiankuang" v-if="isLeft">
                <div :class="['s_item','animated',{'bounceInUp':index==1}]" v-if="index==1">粉青小封坛</div>
                <div :class="['s_item','animated',{'bounceInUp':index==2}]" v-if="index==2">清图红盒</div>
                <div :class="['s_item','animated',{'bounceInUp':index==3}]" v-if="index==3">清图红盒</div>
                <div :class="['s_item','animated',{'bounceInUp':index==4}]" v-if="index==4">清图蓝盒</div>
                <div :class="['s_item','animated',{'bounceInUp':index==5}]" v-if="index==5">清图蓝盒</div>
            </div>
            <div class="s_list iconfont iconbiankuang" v-if="isRight">

                <div :class="['s_item','animated',{'bounceInUp':index==5}]" v-if="index==5">清图蓝盒</div>

                <div :class="['s_item','animated',{'bounceInUp':index==4}]" v-if="index==4">清图蓝盒</div>

                <div :class="['s_item','animated',{'bounceInUp':index==3}]" v-if="index==3">清图红盒</div>
                <div :class="['s_item','animated',{'bounceInUp':index==2}]" v-if="index==2">清图红盒</div>
                <div :class="['s_item','animated',{'bounceInUp':index==1}]" v-if="index==1">粉青小封坛</div>
            </div>
            <!-- <div class="iconfont iconyoujiantou" @click="right"></div> -->
        </div>
        <div class="ts" @click="shopDetail()" >点击探索</div>
    </div>
</template>
<script>
import Vue from "vue";

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

import { Api, Global, Util } from "@utils/global"; 

export default {
    components: {},
    data() {
        return {
            scroll_sw:0,
            // url:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            imgList:[
                'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                ],
            index:1,
            startX:0,
            isLeft:true,
            isRight:false,

            pressList: [{ name: '1', isShow: false }, { name: '2', isShow: false }, { name: '3', isShow: false }, { name: '4', isShow: false }, { name: '5', isShow: false }],
            numList: ['p0', 'p1', 'p2', 'p3', 'p4'],
            imgIndex: 0,
            imgTimer: null,
            btnShow: false
        }
    },
    computed: {
        swiper(){
            return this.$refs.mySwiper.swiper;//全局使用swiper对象，使用时直接this.swiper.方法
        }
    },
    mounted() {
        this.silder()
    },
    methods:{
        redirect: Util.redirect,
        shopDetail(ev){
            console.log('ev',ev)
            this.redirect('shopDetail',{index:this.index})
        },
        silder(){
            var mySwiper = new Swiper ('.swiper-container', {
                // freeMode: true,//开启自由模式
                // slidesPerView: 'auto',
                // spaceBetween: 20,
                // loop: true,
			// watchSlidesProgress: true,
            slidesPerView: 'auto',
            spaceBetween: 10,
            centeredSlides: true,
            // slidesPerView: 1.1,
            loop: true,
            autoplay: 3000,
            // resistanceRatio: 0,//取消边缘的反弹效果
            // mousewheel: {
            //     releaseOnEdges: true
            // },
			// loop: true,
			// loopedSlides: 3,
			// autoplay: 3000,
			// prevButton: '.swiper-button-prev',
			// nextButton: '.swiper-button-next',
			// pagination: '.swiper-pagination',
            //paginationClickable :true,
            on:{
                transitionStart: function() {//滑动动画开始时，
                    // _this.active1 = this.realIndex;
                    console.log(this.realIndex)
                }
            },
			// onProgress: function(swiper, progress) {
			// 	for (i = 0; i < swiper.slides.length; i++) {
			// 		var slide = swiper.slides.eq(i);
			// 		var slideProgress = swiper.slides[i].progress;
			// 		modify = 1;
			// 		if (Math.abs(slideProgress) > 3) {
			// 			modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
			// 		}
			// 		translate = slideProgress * modify * 380 + 'px';
			// 		scale = 1 - Math.abs(slideProgress) / 2.5;
			// 		zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
			// 		slide.transform('translateX(' + translate + ') scale(' + scale + ')');
			// 		slide.css('zIndex', zIndex);
			// 		slide.css('opacity', 1);
			// 		if (Math.abs(slideProgress) > 1) {
			// 			slide.css('opacity', 0);
			// 		}
			// 	}
			// },
			onSetTransition: function(swiper, transition) {
				for (var i = 0; i < swiper.slides.length; i++) {
					var slide = swiper.slides.eq(i)
					slide.transition(transition);
				}

			},
			//处理分页器bug
			// onSlideChangeStart: function(swiper) {
			// 	if (swiper.activeIndex == 4) {
			// 		swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
			// 		console.log(swiper.bullets.length);
			// 	}
			// }
			})
        }
    
        
    }
}
</script>

<style lang="scss">
#certify {
	position: relative;
	width: 100%;
	margin: 72px auto 0
}

#certify .swiper-container {
	/* padding-bottom: 60px; */
}
#certify .swiper-wrapper{
    display: flex;
    align-items: center;
}
#certify  .swiper-slide {
	// width: 354px;
	// height: 500px;
    // background: #fff;
    // width: 200px;
    // height: 500px;
    width: 554px;
    height: 860px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: rgba(255,255,255,0.6);
    border-radius: 15px;
    color: #000;
    // margin: 0px 20px;
}
#certify  .swiper-slide img{
    width: 90%;
    // height: 100%;
    height: 70%;
	display:block;
}
#certify .swiper-slide-active{
    // width: 554px;
    // height: 860px;
    
    background: rgba(255,255,255,1);
    border-radius: 15px;
    img{
        width: 80%;
        height: auto;
    }
}
#certify  .swiper-slide span {
    width: 100%;
    height: 130px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size:30px;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    // color:rgba(255,255,255,1);
    color: #000;
    // background:rgba(0,0,0,0.5);
    text-align: center;
    line-height: 130px;
    // display: none;
}

#certify .swiper-pagination {
	width: 100%;
	bottom: 20px;
}

/* #certify .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 5px;
	border: 3px solid #fff;
	background-color: #d5d5d5;
	width: 10px;
	height: 10px;
	opacity: 1;
} */

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
	border: 3px solid #00aadc;
	background-color: #fff;
}

#certify .swiper-button-prev {
  left: 0;
  width: 80px;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}

/* #certify .swiper-button-prev:hover {
	background-position: 0 -46px;
	background-size: 100%
} */

#certify .swiper-button-next {
  right: 0;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  width: 80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}
.s_bottom{
    display: flex;
    align-content: center;
    padding: 0px 40px;
    display: none;
    .iconzuojiantou{
        font-size: 60px;
        color: #d7bf87;
    }
    .iconyoujiantou{
        font-size: 60px;
        color: #d7bf87;
    }
}
.s_list{
    margin: auto;
    margin-top: -20px;
    color: #d7bf87;
    font-size: 88px;
    position: relative;
    width: 260px;
    height: 88px;
    // display: flex;
    // justify-content: center;
    // line-height: 88px;
    // width: 180px;
        // border:1px solid #d7bf87;
    .s_item{
        position: absolute;
        top:50%;
        left: 28%;
        color: #fff;
        text-align: center;
        font-size: 26px;
        
    }
}
.ts{
    font-size: 24px;
    color: #aaa;
    text-align: center;
    line-height: 88px;
}
</style>

